@charset "utf-8";
body{margin:0 auto; font-family:"microsoft yahei"; color:#555; font-size:12px; background:#fff;}
div,dl,ul,li,span,p,img,h1,h2,h3,dl,p,em,h6{margin:0px; padding:0px; list-style:none; border:0px;}
.clear{clear:both; height:0px; overflow:hidden;}
.fl{float:left;}
.fr{float:right;}
.cp img{border:1px solid #ccc; background-color:#fff; padding:2px; background-color:#fff;}
.cp a:hover img{border:1px solid #0883d3; background-color:#fff; padding:2px;}
a{color:#555; text-decoration: none; cursor:pointer;}
.trans1 img{transition:all 0.8s linear; -webkit-transition:all 0.8s linear; -moz-transition:all 0.8s linear; -ms-transition:all 0.8s linear;}
.trans1 img:hover{ transform: rotate(360deg);-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg);}
		
.trans2 img{transition:all 0.5s linear; -webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -ms-transition:all 0.5s linear;}
.trans2 img:hover{ transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -wbkit-transform: scale(1.2);}
	
a:hover{text-decoration: none; color:#0883d3;}
.box,.head_all{width:1200px; height:auto; margin:0 auto; position: relative;}
  .box:after,head_all:after{ display: block; clear: both; content: "";}


/*设置浮动*/
.fl,.pull-left {float: left;}
.fr,.pull-right {float: right;}
.pr{position: relative;}
.pa{position: absolute;}

.clear{ clear:both; height: 0; overflow: hidden;}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}

/*动画效果*/
@keyframes nbanA{
0%{transform: translateY(0px);}
50%{transform: translateY(-10px);}
100%{transform: translateY(0px);}
}
@keyframes moveBg {
  0% {
    background-position: 0% 30%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.box,.content,.w1200,.w1300,.width-1200,.w1400{ width:1200px; margin:0 auto;}

/* -- 内页布局 -- */
.page_bg { padding:30px 0 30px; background:#fff;}
.page_main { margin: 0 auto; width: 1200px;}  /*版面宽度*/
.page_content{ width:910px;} /*右边宽度*/
.page_left{ width:250px;} /*左边宽度*/
.page_full{ width:100%;}
.dis,.hide{ display:none;}

.line-clamp-1{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.line-clamp-2{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.line-clamp-3{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.title1{ text-align:center;  font-size:18px; color:#f1f1f1; position:relative; z-index:1; padding-top:90px;}
.title1 span{ color:#fff; font-size:40px; position:relative; display:inline-block; margin-bottom:15px; line-height:40px; font-weight:bold;}
.title1 span:after{ content:''; display:block; position:absolute; width:100%; height:6px; background:#ffa401; left:0; bottom:-4px; animation:widthchange 3s linear infinite; z-index:-1;}
.title1 em{ color:#fff;}


 
 
@-webkit-keyframes prod_ti {
 0% { transform: rotate(0deg);}
 100%{ transform: rotate(360deg)}
}
@-moz-keyframes prod_ti {
0% {width:0;}
 50%{width:200px;}
 100%{width:0;}
 }



  /*首页-产品中心*/
 .prod_all{width: 100%;min-width: 1200px; background: #fff; margin-top: 60px;}
 .prod_t{ text-align: center; font-size: 16px; line-height: 42px;}
 .prod_t p{font-size: 40px; font-weight: bold;color: #333;}
.prod_t span{ color: #0883d3;}
 .prod_t dl{font-family: "arial";  font-size: 14px; text-transform: uppercase; color: #777;}
 .prod_t dl:after{ display: block; content: ""; height: 30px; width: 30px; background: url(files/images/20200429111436_1044482574.png) no-repeat;position: relative; margin: 0 auto; left:0;right: 0; top:0;z-index: 1;animation: prod_ti  2s infinite;    -moz-animation: prod_ti 2s linear infinite; -ms-animation: prod_ti 2s linear infinite; -o-animation: prod_ti 2s linear infinite;    -webkit-animation: prod_ti 2s linear infinite;}
 
@-webkit-keyframes prod_ti {
 0% { transform: rotate(0deg);}
 100%{ transform: rotate(360deg)}
}
@-moz-keyframes prod_ti {
0% {width:0;}
 50%{width:200px;}
 100%{width:0;}
 }
 
  .prod_b{ width: 1200px; margin:20px auto auto auto;}
 .list{ width: 250px;}
 .list_t{ background: #0883d3 url(files/images/20200430102941_1157596180.png)168px 31px no-repeat; line-height:28px; height: 77px; border-radius: 30px 0 0 0; color: #fff; padding: 30px 0 0 26px;}
   .list_t p{ font-size: 22px;font-weight: bold; }
  .list_t dl{font-size: 12px; text-transform: uppercase; color: #fff; font-family: "arial";}
 .list_b{ display: block; border: 1px solid #eee; border-top: none; }
  

 
 /*新品推荐*/
 .new_prod{}
.benfit_wwt {
    width:900px;
    height: 450px;
    overflow: hidden;
    position: relative;
    z-index: 9
}

.benfit_wwt ul {
    height: 100%;
    position: absolute;
}

.benfit_wwt ul li {
    float: left;
    width: 1100px;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #fff;
}


.benfit_wwt .btnBg {
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    bottom: 0;
    background: #2d9fff;
    display: none;
}

.benfit_wwt .btn {
    display: none;
    position: absolute;
    width: 90px;
    padding-right: 50px;
    height: 23px;
    margin-left: -46px;
    left: 50%;
    bottom: 35px;
    text-align: right;
}

.benfit_wwt .btn span {
    display: inline-block;
    _display: inline;
    _zoom: 1;
    width: 25px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    _font-size: 0;
    margin-left: 5px;
    cursor: pointer;
    background: #fff;
}

.benfit_wwt .btn span.on {
    background: #fff;
}

.benfit_wwt .preNext {
    width: 45px;
    height: 100px;
    position: absolute;
    top: 170px;
	opacity:0.8;
    background: url(files/images/20200430103158_807067470.png) no-repeat 0 0;
    cursor: pointer;
}
.benfit_wwt .pre {
    left: 0;
}

.benfit_wwt .next {   right: 0;
 background-position: right top;}
 .new_prod .word{width: 300px; padding: 48px 60px 0 78px; font-size: 15px; border: 1px solid #eee; height: 
  400px;  color: #555;line-height: 32px; font-weight: lighter;}
 .new_prod .word p{ font-size: 25px;font-weight: bold;line-height: 50px;color: #333; padding-bottom: 20px; margin-bottom: 20px; background: url(files/images/20200429141308_1223338226.jpg) bottom left no-repeat;}
 .new_prod .word i{ letter-spacing: 2px; display: block; font-style: normal; font-weight: normal;font-size: 18px; color: #333; margin-top: 30px; text-align: center;}
 .new_prod .word i img{ display: block; margin: 0 auto 5px auto;}
 .new_prod .word i+i{ margin-left: 50px;}
 .new_prod .word a{font-size: 15px;text-align: center; background: #0883d3;width: 150px; line-height: 45px; color: #fff;font-weight: normal; display: block; margin-top: 40px;}
 .new_prod .word a+a{ background: #0076c3;}
 .new_prod .word a:hover{ background: #f78e1a;}
 .new_prod .img{width: 460px;height: 450px; overflow: hidden;}
 
 .prod_gd{ width: 1200px; margin: 0 auto;margin-top: 30px;}
 
  
.prod_gd td { display: block; float: left; padding: 0; width: 287px; margin: 8px 14px 8px 0; position: relative; border:1px #ddd solid}
.prod_gd td> a:after,.prod_gd td > a::after{ content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5) url(files/images/20200430103225_1049023915.png) no-repeat center; left:0; top: -100%; transition:0.3s all ease-in-out; }
   .prod_gd  td:nth-of-type(4n) { margin-right: 0;}
.prod_gd td > span { height: 50px; width: 100%; padding-top: 0; display: block; position: relative; overflow: hidden;}
.prod_gd td > span > a{ display:block; border-top: 1px solid #ddd; height: 50px; line-height: 50px; color: #454545; font-size: 14px; transition:0.3s all ease-in-out; position: relative; z-index: 1111}
.prod_gd td > span:after,.pro_bg td > span::after{ position: absolute; content: ''; width: 100%; height: 100%; background: #0883d3; bottom: -100%; left: 0; transition:0.3s all ease-in-out; }
.prod_gd td:hover > a:after,.pro_bg td:hover > a::after{ top: 0; }
.prod_gd td:hover > span > a{ color: #fff; }
.prod_gd td:hover > span:after,.pro_bg td:hover > span::after{ bottom: 0; }
.prod_gd td br { display: none;}
.prod_gd tr:after, .pro_bg tr::after { content: ''; display: block; clear: both; }
.prod_gd td a{ position: relative; display: block; overflow: hidden; }
.prod_gd td a img{ display: block; width: 100%; height: auto; transition:0.5s all ease-in-out; }
.prod_gd td:hover a img{ transform:scale(1.2); }
  
   #colee{ height:650px; overflow: hidden;}
   
   
 #showtyepname{display:none;}
  
  #colee_left{ width:1200px; overflow:hidden; }